<template>
	<view class="main_bg ">
		<app-header title="个人信息"></app-header>
		<view style="height: 1px;"></view>
		<view class="user">

			<view class="form">
				<u-cell-group :border="false">
					<u-cell title="头像"  size="large" >
						<view slot="value">
							<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<view class="head flex-c" :style="'background-image:url('+userInfo.avatar+') ;'">
									<view v-if="!userInfo.avatar">上传</view>
									<view v-if="!userInfo.avatar">头像</view>
								</view>
							</button>
						</view>

					</u-cell>
					<u-cell title="昵称" size="large" >
						<view slot="value">
							<input type="nickname" v-model="userInfo.name" @blur="getName" style="text-align: right;"
								placeholder="请输入昵称" />
						</view>
					</u-cell>
					<u-cell title="电话" size="large" :border="userInfo.type!==2">
						<view slot="value" class="mobile">
							{{userInfo.mobile || ''}}
						<!-- 	<view class="code_btn flex-c" v-if="!userInfo.mobile"><button open-type="getPhoneNumber"
									@getphonenumber="getPhoneNumber">获取</button>

							</view> -->
						</view>
					</u-cell>
					<u-cell title="公司" size="large" :border="false" v-if="userInfo.type!==2">
						<view slot="value">
							{{userInfo.shop_name_f}}
						</view>
					</u-cell>




				</u-cell-group>
			</view>
		</view>
		<view class="btn flex-c" @click="submit">提交</view>


	</view>
</template>

<script>
	import Base64 from '../../components/Base64.js';
	import moment from 'moment'
	var CryptoJS = require('crypto-js');
	export default {
		data() {
			return {
				show: false,
				ossInfo: {},
				code: "",
				userInfo: {},
			}
		},
		computed: {
			userInfos() {
				this.userInfo = this.$store.state.user.info || {}
				return this.$store.state.user.info
			}
		},
		created() {
			this.userInfo = this.$store.state.user.info || {}
			this.getOss()
		},
		onLoad() {
			this.getChatCode()
		},
		methods: {
			getChatCode() {
				const _this = this
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes, 1111)
						if (loginRes.errMsg == "login:ok") {
							_this.code = loginRes.code
						} else {
							uni.showToast({
								title: "授权失败，稍后重试",
								icon: 'none'
							});
						}
					}
				});
			},
			getName(e) {

				this.$nextTick(() => {

					this.userInfo.name = e.detail.value
					// this.submit()
				})
			},
			getOss() {
				this.$http.post('/data/api.data/oss', {}).then((res) => {
					this.ossInfo = res.data
				})
			},
			onChooseAvatar(e) {
				this.uploadF(e.detail.avatarUrl)
			},
			getPolicy() {
				let date = new Date();
				date.setHours(date.getHours() + 87600);
				let expire = date.toISOString();
				const policy = {
					"expiration": expire, // 设置该Policy的失效时间
					"conditions": [
						["content-length-range", 0, 30 * 1024 * 1024] // 设置上传文件的大小限制
					]
				};
				return Base64.encode(JSON.stringify(policy));
			},
			uploadF(url) {
				const _this = this
				const filePath = 'sbbxgl_oshainiu_cn/' + moment().unix() + '.jpg'
				const uploadUrl = "https://" + this.ossInfo.host;
				const accessKeyId = this.ossInfo.accessKey;
				const policy = this.getPolicy();
				var accessKeySecret = this.ossInfo.secretKey; // 替换为你的 AccessKeySecret
				var signature = CryptoJS.HmacSHA1(policy, accessKeySecret).toString(CryptoJS.enc.Base64);
				uni.uploadFile({
					url: uploadUrl,
					filePath: url,
					name: 'file',
					formData: {
						'key': filePath, // 服务利用key找到文件
						'policy': policy,
						'OSSAccessKeyId': accessKeyId,
						'signature': signature,
						'success_action_status': '200',
					},
					success: function(res) {
						var url = uploadUrl + "/" + filePath
						_this.$set(_this.userInfo, 'avatar', url)
						// _this.submit()
					},
					fail: function(err) {
						console.log(res)
					},
				})

			},
			getPhoneNumber(e) {
				// 参数e是绑定的授权方法自动传入过来的, 为了获取到iv和encryptedData值，让后端解析手机号
				this.$http.login("/data/api.wxapp/decode", {
					code: this.code,
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				}).then(res => {
					this.$db.save('token', res.data.token.token)
					this.$store.commit('setToken', res.data.token.token)
					this.$set(this.userInfo, 'mobile', res.data.mobile)
					this.getChatCode()
					uni.showToast({
						title: "获取成功",
						duration: 2000
					});
				}).catch(e => {
					this.getChatCode()
				})

			},
			submit() {
				const _this = this
				this.$http.post('/data/api.auth.user/addBase', {
					name: this.userInfo.name,
					avatar: this.userInfo.avatar,
				}).then((res) => {
					uni.showToast({
						title: "提交成功",
						duration: 2000
					});
					this.$store.dispatch("GetInfo")
					uni.navigateBack({
						delta: 1
					});
				})
			},
			logout() {
				this.$store.commit('setRole', 1)
				this.$store.commit('setToken', '')
				this.$store.commit('setUser', null)
				uni.redirectTo({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		background-size: contain;
		background-position: top;
		background-repeat: no-repeat;
	}

	.logout {
		border: 1px solid #002853;
		color: #002853;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.user { 
		margin: 30rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 8px;
		padding-bottom: 20rpx;

		.head {
			width: 78rpx;
			height: 78rpx;
			// margin: 20px auto;
			border-radius: 50%;
			overflow: hidden;
			background-size: cover;
			background-position: center;
			background-color: #efefef;
			color: #666;
			flex-direction: column;
			line-height: 45rpx;
			font-size: 20rpx;
			line-height: 24rpx;


			::v-deep image {
				width: 178rpx !important;
				height: 178rpx !important;

				border-radius: 50% !important;
				overflow: hidden !important;

			}

		}

		button {
			background-color: rgba(0, 0, 0, 0);

			align-items: center;
			border-color: transparent;
			border-style: none;

			color: #FFF;
			margin: 0;
			padding: 0;

			&::after {
				border: none;
			}
		}

	}

	.mobile {
		display: flex;
	}

	.code_btn {
		min-width: 88rpx;
		height: 45rpx;
		background: #FF7744;
		border-radius: 33rpx;
		color: #fff;
		margin-left: 10rpx;

		button {
			margin: 0;
			font-size: 24rpx;
		}


	}
	.btn {
		position: fixed;
		left: 40rpx;
		right: 40rpx;
		bottom: 50rpx;
			height: 80rpx;
			background-color: #4F6FF6;
			border-radius: 10rpx;
			font-size: 30rpx;
	
			color: #FFFFFF;
			margin: 40rpx 0;
		}
		::v-deep .u-cell__body--large {
			padding-top: 0!important;
			padding-bottom: 0!important;
			height: 100rpx;
		}
</style>